<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,viewport-fit=cover,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/LArea.min.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			/*padding-bottom: constant(safe-area-inset-bottom);*/
			background: rgba(245, 245, 245, 1);
		}
		
		header {
			background: #FFF5CE;
			padding: 6px;
			font-size: 0.24rem;
			display: flex;
			align-items: center;
		}
		
		header>div:first-child {
			width: 0.8rem;
		}
		
		header img {
			height: 20px;
			width: 20px;
			display: block;
			margin: 0 4px;
		}
		
		.getvip {
			background: #fff;
		}
		
		.getvip>.tit {
			display: flex;
			align-items: center;
			font-size: 0.32rem;
			color: #CA1010;
			padding: 10px;
			font-weight: bold;
		}
		
		.getvip>.tit span {
			color: #9b9b9b;
			font-size: 0.22rem;
			font-weight: 100;
		}
		
		.getvip>.tit img {
			display: block;
			padding-right: 2px;
			width: 0.4rem;
		}
		
		.getvip>div:nth-child(2) {
			font-size: 0.22rem;
			color: #9B9B9B;
			padding: 0 10px;
		}
		
		.inp input {
			border: 0;
			height: 30px;
			font-size: 0.28rem;
		}
		
		input::-webkit-input-placeholder {
			color: #9B9B9B;
		}
		
		.inp>div {
			height: 60px;
			display: flex;
			align-items: center;
			font-size: 0.28rem;
			width: 96%;
			margin: 0 auto;
			border-bottom: 1px solid #ddd;
		}
		
		.inp button {
			color: #2B7FE1;
			background: #fff;
			border: 0;
			font-size: 0.28rem
		}
		
		.inp>div:nth-child(2) {
			display: flex;
			justify-content: space-between;
		}
		
		.yesphone {
			font-size: 0.24rem;
			padding: 20px 10px;
			display: flex;
			align-items: center;
		}
		
		.yesphone input {
			margin-right: 3px;
		}
		
		.phone {
			font-size: 0.32rem;
			background: #fff;
			margin-top: 8px;
		}
		
		.phone>div {
			width: 96%;
			margin: 0 auto;
		}
		
		.phone>div:nth-child(1) {
			font-size: 0.32rem;
			font-weight: bold;
			padding: 15px 0px;
		}
		
		.phone>div:nth-child(2) {
			padding: 10px 0px;
		}
		
		.phone input {
			border: 0;
			height: 30px;
			font-size: 0.28rem;
		}
		
		.address {
			background: #fff;
			padding: 15px 10px;
			margin-top: 8px;
		}
		
		.address>.tit {
			font-size: 0.32rem;
			display: flex;
			align-items: center;
			font-weight: bold;
		}
		
		.address>.tit img {
			display: block;
			height: 0.32rem;
			width: 0.32rem;
			margin-right: 5px;
		}
		
		.useraddress {
			display: flex;
			justify-content: space-between;
			font-size: 0.28rem;
			color: #9B9B9B;
			align-items: center;
			flex-wrap: wrap;
			padding: 10px 0;
		}
		
		.useraddress img {
			width: 10px;
		}
		
		.useraddress>div:first-child {
			display: flex;
			flex-wrap: wrap;
			width: 80%;
			justify-content: space-between;
		}
		
		.useraddress>div:first-child>div:last-child {
			width: 100%;
			margin-top: 10px;
		}
		
		.shop {
			background: #fff;
			font-size: 0.32rem;
			font-weight: bold;
			margin-top: 8px;
			margin-bottom: 7px;
		}
		
		.shop>div:first-child {
			padding: 15px 10px;
		}
		
		.shop>div {
			padding: 0 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.shop>div>div:first-child {
			width: 80%;
		}
		
		.shop img {
			height: 1rem;
			width: 1rem;
			display: block;
			padding-right: 0.2rem;
			padding-bottom: 10px;
		}
		
		.shop>div>div {
			display: flex;
			flex-wrap: wrap;
			font-size: 0.24rem
		}
		
		.list {
			display: flex;
			background: #fff;
			justify-content: space-between;
			font-size: 0.32rem;
			margin-top: 2px;
		}
		
		.list>div {
			padding: 15px 10px;
		}
		
		.fontw {
			font-weight: bold;
		}
		
		.bot {
			margin-top: 2px;
			height: 100px;
			background: #fff;
			width: 100%;
		}
		
		bottom {
			display: flex;
			background: #fff;
			font-size: 0.32rem;
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
		}
		
		bottom>div {
			width: 50%;
			padding: 15px 0;
			border-top: 1px solid #ddd;
		}
		
		bottom span {
			color: #CA1010;
		}
		
		bottom>div:first-child {
			text-indent: 10px;
		}
		
		bottom>div:last-child {
			background: #CA1010;
			color: #fff;
			text-align: center;
		}
		
		.goname,.gophone,.ars,.detars{
			padding: 10px 0;
			display: flex;
			font-size: 0.28rem;
			color: #9B9B9B;
			align-items: center;
		}
		
		.goname>div:nth-child(1),.gophone>div:nth-child(1),.ars>div:nth-child(1),.detars>div:nth-child(1) {
			width: 1.5rem;
		/*	text-align-last: justify;*/
		}
		.goname input,
		.gophone input,
		.ars input,
		.detars input{
			border: 0;
			height: 30px;
		}
		
	</style>

	<body>
		<header>
			<div><img src="img/warnicon.png" /></div>
			<div>订单信息将以短信的方式发送给你，同时可在公众号“糖卡会员店管家”内查看！</div>

		</header>
		<div class="getvip">
			<div class="tit">
				<img src="img/vipicon.png" /> 会员领取手机号
				<span>&nbsp;(会员卡为电子权益卡,不邮寄)</span>
			</div>
			<div>该账号为登录账号</div>
			<div class="inp">
				<div><input type="text" name="" id="" value="" placeholder="请输入手机号码" /></div>
				<div>
					<div><input type="text" name="" id="" value="" placeholder="请输入验证码" /></div>
					<div><button>获取验证码</button></div>
				</div>
			</div>
			<div class="yesphone">
				<input type="checkbox" name="" id="" value="" />作为充值或消费码接受手机号？
			</div>
		</div>

		<div class="phone">
			<div>话费充值手机号</div>
			<div><input type="text" name="" id="" value="" placeholder="请输入手机号码" /></div>
		</div>
		<div class="phone">
			<div>消费码接收手机号</div>
			<div><input type="text" name="" id="" value="" placeholder="请输入手机号码" /></div>
		</div>

		<div class="address">
			<div class="tit">
				<img src="img/address.png" /> 收货信息
			</div>
			<div class="goname">
				<div>名字</div>
				<div><input type="text" name="" id="" value="" placeholder="收货人姓名"/></div>
			</div>
			<div class="gophone">
				<div>手机号</div>
				<div><input type="text" name="" id="" value="" placeholder="收货人手机号码"/></div>
			</div> 
			<div class="ars">
				<div>地址</div>
				<div>
					<input id="demo1" readonly="" placeholder="请选择地址" value="" />
					<input id="value1" type="hidden" value="20,234,504" />
				</div>

			</div>
			<div class="detars">
				<div>详细地址</div>
				<div>
					<input type="text" name="" id="" value="" placeholder="收货详细地址"/>
				</div>
			</div>
			<!--<div class="useraddress">
				<div>
					<div>来巡山</div>
					<div>18890201551</div>
					<div>北京市朝阳区京密路香江花园丽苑小区32栋5单元11层302室</div>
				</div>
				<div>
					<img src="img/righticon.png"/>
				</div>
			</div>-->
		</div>

		<div class="shop">
			<div class="tit">商品</div>
			<div>
				<div>
					<img src="img/logo.png" />
					<img src="img/logo.png" />
					<img src="img/logo.png" />
					<img src="img/logo.png" />
					<img src="img/logo.png" />
					<img src="img/logo.png" />
				</div>
				<div>共3件商品</div>
			</div>
		</div>

		<div class="list">
			<div>商品价格</div>
			<div>￥128</div>
		</div>
		<div class="list">
			<div>活动特价</div>
			<div>￥29.9</div>
		</div>
		<div class="list">
			<div>红包减免</div>
			<div>-12.2</div>
		</div>
		<div class="list">
			<div class="fontw">应付金额</div>
			<div>￥19.9</div>
		</div>
		<div class="bot">

		</div>
		<bottom>
			<div>实付款：<span>￥19.9</span></div>
			<div>提交订单</div>
		</bottom>
	</body>
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/LAreaData2.js"></script>
	<script src="js/LArea.min.js"></script>
	<script>
		var area1 = new LArea();
		area1.init({
			'trigger': '#demo1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			'valueTo': '#value1', //选择完毕后id属性输出到该位置
			'keys': {
				id: 'value',
				name: 'text'
			}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			'type': 2, //数据源类型
			'data': [provs_data, citys_data, dists_data] //数据源
		});
		area1.value = [0, 0, 0]; //控制初始位置，注意：该方法并不会影响到input的value
	</script>

</html>